<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { getMapJson, getList as getBranchList } from "@/api/idp/branch";
import { useRouter } from "vue-router";

defineOptions({ name: "JsonMap" });
const router = useRouter();

// 获取地图DOM元素
const map = ref();

// 注册中国地图

onMounted(async () => {
  const myMap = echarts.init(map.value);
  getMapJson("420000").then(res => {
    echarts.registerMap("map", res as any);
    //设置配置项
    // myMap.setOption(option8);
  });
  getBranchList().then(res => {
    console.log(res);
    const pointData = [] as any[];
    res.forEach(item => {
      pointData.push({
        id: item.id,
        name: item.name,
        value: [item.lng, item.lat],
        titlePic: item.titlePic,
        admin: item.admin,
        tel: item.tel
      });
      console.log(pointData);
      option8.baseOption.series[1].data = pointData;
      console.log(option8);
      //设置配置项
      myMap.setOption(option8);
    });
  });
  myMap.on("click", function (params: any) {
    if (params.data.id) {
      router.push("/miao/officeShow/index?orgId=" + params.data.id);
    }
  });
});

// 地图数据结构体
const option8 = {
  baseOption: {
    backgroundColor: "#FFFFFF",
    //悬浮窗  ,
    tooltip: {
      trigger: "none",
      formatter: p => {
        console.log(p);
        return p;
      }
    },
    title: [
      {
        left: "center",
        top: 10,
        text: "营业部分布信息",
        textStyle: {
          color: "#FF320F",
          fontSize: 16
        }
      }
    ],
    geo: {
      map: "map",
      zoom: 1.1,
      roam: true,
      label: {
        normal: {
          show: true,
          color: "#FF320F", //省份标签字体颜色
          formatter: p => {
            switch (p.name) {
              case "内蒙古自治区":
                p.name = "内蒙古";
                break;
              case "西藏自治区":
                p.name = "西藏";
                break;
              case "新疆维吾尔自治区":
                p.name = "新疆";
                break;
              case "宁夏回族自治区":
                p.name = "宁夏";
                break;
              case "广西壮族自治区":
                p.name = "广西";
                break;
              case "香港特别行政区":
                p.name = "香港";
                break;
              case "澳门特别行政区":
                p.name = "澳门";
                break;
            }
            return p.name;
          }
        }
      },
      itemStyle: {
        normal: {
          areaColor: "#24CFF4",
          borderColor: "#53D9FF",
          borderWidth: 1.3,
          shadowBlur: 15,
          shadowColor: "rgb(58,115,192)",
          shadowOffsetX: 7,
          shadowOffsetY: 6
        },
        emphasis: {
          areaColor: "#8dd7fc",
          borderWidth: 1.6,
          shadowBlur: 25
        }
      }
    },
    series: [
      {
        name: "年销售额度",
        type: "map",
        geoIndex: 0,
        map: "china",
        roam: true,
        zoom: 1.3,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        data: []
      },
      {
        name: "散点",
        type: "effectScatter",
        coordinateSystem: "geo",
        symbol: "pin",
        symbolSize: [30, 30],
        rippleEffect: {
          brushType: "stroke"
        },
        hoverAnimation: true,
        zlevel: 1,
        itemStyle: {
          normal: {
            color: "#d8554a", //标志颜色
            size: 50
          }
        },
        tooltip: {
          trigger: "item",
          formatter: p => {
            const txtCon = `<table>
                        <tr><td> 分支机构：${p.data.name}</td></tr>
                        <tr><td> 电话：${p.data.tel}</td></tr>
                        <tr><td> 管理员：${p.data.admin}</td></tr>
                        <tr><td> 显示什么欢迎大家提供意见</td></tr>
                         <tr><td> <img style="width: 300px; height: 200px;" src="${
                           "/api/idp/static/pic/" + p.data.titlePic
                         }"></td></tr>
                      </table>`;
            return txtCon;
          }
        },
        data: [{ name: "陶公岛", value: [114.34713, 30.560857] }],
        showEffectOn: "render" //加载完毕显示特效
      }
    ]
  }
};
</script>

<template>
  <div>
    <div style="width: 100%; height: 80vh" class="map" ref="map" />
  </div>
</template>

<style scoped></style>
